<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>任务信息检索</title>
	<link type="text/css" href="css/datatable/page.css" rel="stylesheet" />
	<link type="text/css" href="css/datatable/table.css" rel="stylesheet" />
	<style type="text/css">
	 	test {
	 	font-color:red;
	 	backgroud:red;
	 	}
	</style>
	<script type="text/javascript" src="js/jquery/datatable/jquery.dataTables.js"></script>
	<script type="text/javascript" src="js/formjson.js"></script>
	<script type="text/javascript" src="js/common/util.js"></script>
	<script type="text/javascript"> 
		var oTable = null;
		
		$(function() {
			$("#taskInfo").hide();
			$("#test").click(function () { 
				alert(1);
			});
			$(".tipsClass").mouseover(function () { 
				alert(1);
			});
		} );
		

		//“检索”按钮的处理函数
		function search() {
			if (oTable == null) { //仅第一次检索时初始化Datatable
				$("#taskInfo").show();
				oTable = $('#taskInfo').dataTable( {
					"bAutoWidth": false,					//不自动计算列宽度
					"aoColumns": [							//设定各列宽度
									{"sTitle": "任务编号","sWidth": "80px","colName": "task_id",
                							"fnRender": function(obj) {
                								 var s = obj.aData[obj.iDataColumn];
                                             	 s="<a href='http://www.baidu.com' target='_blank'>"+s+"</a>";
                    							 return s;
               					 		}
               					 	},
									{"sTitle": "所属系统","sWidth": "100px","colName": "task_system"},
									{
										"sTitle": "模块",
										"sWidth": "60px",										
										"bSortable": false,
										"dropName":"MODULE_ID",
                						"colName": "module_id"
               						 },
									{"sTitle": "功能项1","sWidth": "260px", "sClass": "left","colName": "function_name",
                							"fnRender": function(obj) {
                								 var s = obj.aData[obj.iDataColumn];
                                             	 s="<div class='tipsClass'>"+s+"</div>";
                    							 return s;
               					 		}},									
									{"sTitle": "任务阶段","sWidth": "60px","colName": "task_stage"},
									{"sTitle": "任务状态","sWidth": "60px","colName": "task_state"},
									{
										"sTitle": "负责人",
										"sWidth": "60px",
										"bSortable": false,
                						"colName": "charge_man",
                						"dropName": "CHARGE_MAN",
                						/*,
                							"fnRender": function(obj) {
                								 var s = obj.aData[obj.iDataColumn];
                                             	 s=getDropValue("CHARGE_MAN",s);
                    							 return s;
               					 		}*/
               					 	}
								
					],						
					"bJQueryUI": true,		
					"bSort": true, 						//排序功能
					//"bAutoWidth": true,                    //自动宽度
					"bProcessing": true,					//加载数据时显示正在加载信息
					"bServerSide": true,					//指定从服务器端获取数据
					"bFilter": false,						//不使用过滤功能,即查询
					"bLengthChange": false,					//用户不可改变每页显示数量
					"iDisplayLength": 8,					//每页显示8条数据
					"sAjaxSource": "taskInfo/search.do",//获取数据的url
					"fnServerData": retrieveData,			//获取数据的处理函数
					"sPaginationType": "full_numbers",		//翻页界面类型,two_button 和full_numbers
					"oLanguage": {							//汉化
						"sLengthMenu": "每页显示 _MENU_ 条记录",
						"sZeroRecords": "没有检索到数据",
						"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
						"sInfoEmtpy": "没有数据",
						"sProcessing": "正在加载数据...",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "前页",
							"sNext": "后页",
							"sLast": "尾页"
						}
					}
				});
			}
			//刷新Datatable，会自动激发retrieveData
			oTable.fnDraw(); //多了这一句 第一次点造成查询两次；少了这一句，不能进行第二次、第三次查询
			
			}
		//自定义数据获取函数
		function retrieveData( sSource, aoData, fnCallback ) {
			aoData.push( { "name": "task_id", "value": $("#task_id").val() } );

			$.ajax( {
				"type": "POST", 
				"contentType": "application/json",
				"url": sSource, 
				"dataType": "json",
				"data": JSON.stringify(aoData), 
				"success": function(resp) {
					fnCallback(resp.returnObject);
				}
			});
		}
		
	  
	</script> 
</head>

<body>
	<h2>任务信息检索</h2>
	<div id="searchCondition">
		名称：<input type="text" id="task_id"  />
		<input type="button" value="检索" onclick="search()"/><input type="button" value="test" id="test"/>		
	</div>
	<table class="display" id="taskInfo">
	</table>
</body>
</html>